HTML
<div class="wrapper">
<a href="https://tenman.info/labo/css/files/bouquet.jpg">
<img src="https://tenman.info/labo/css/files/bouquet.jpg" alt="bouquet" width="1920" height="1203" class="promo alignnone size-full wp-image-3677" />
</a>
<p class="link">
<a href="https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms">
<span class="google-font-lobster "> Angled Edges with CSS Masks and Transforms</span>
</a>
</p>
</div>
CSS
.wrapper{
background:#000;
height:1000px;
}
.promo {
-webkit-clip-path: polygon(0 0, 1920px 0, 1920px 87%, 0 100%);
clip-path: polygon(0 0, 1920px 0, 1920px 87%, 0 100%);
}
.link{
font-size:48px;
text-align:center;
margin:100px 0;
}
.link span{
color:rgba(194,199,109,1);
display:block;
transform: rotate(-3deg);
}
新着記事